<script setup lang="ts">
import { ref } from 'vue';

const list = ref([
  {id:1,name:"《红楼梦》",acthor:'曹雪芹'},
  {id:2,name:"《三国演义》",acthor:'罗贯中'},
  {id:3,name:"《西游记》",acthor:'吴承恩'},
  {id:4,name:"《水浒传》",acthor:'施耐庵'},
])

const handleDelete = (id:number) => {
  list.value = list.value.filter(item => item.id !== id)
}
</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <ol>
      <li v-for="(item,index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.acthor }}</span>
        <button @click="handleDelete(item.id)">删除</button>">
      </li>
    </ol>
  </div>
 
</template>